<template>
	<tiny-drawer
		dragable
		v-if="props.config.showFlag"
		:title="props.config.id"
		:visible="props.config.showFlag"
		width="98%"
		@update:visible="props.config.showFlag = $event"
		:z-index="500"
		:show-close="false"
		placement="right"
		:show-footer="true"
	>
		<NodePropertiesToolbar
			v-if="config.showFlag"
			:properties="props.config.properties"
			:id="props.config.id"
			:lf="props.lf"
			:getResource="getResource"
			:versionChangeCallback="versionChangeCallback"
			ref="toolBar"
		></NodePropertiesToolbar>

		<NodePropertiesComponent
			v-if="config.showFlag"
			:properties="props.config.properties"
			:id="props.config.id"
			:lf="props.lf"
			ref="componentView"
		></NodePropertiesComponent>

		<template #footer>
			<div class="my-footer">
				<a-space>
					<a-button type="primary" @click="save">保存</a-button>
					<a-button @click="props.config.showFlag = false">取消</a-button>
				</a-space>
			</div>
		</template>
	</tiny-drawer>
</template>

<script setup>
import {defineProps, onMounted, getCurrentInstance} from 'vue'
import NodePropertiesToolbar from './nodePropertiesToolbar.vue'
import NodePropertiesComponent from './nodePropertiesComponent.vue'
import {nextTick} from "@/utils";

const props = defineProps(['config', 'lf'])
const config = ref({
	showFlag: false
})
onMounted(() => {
	config.value.showFlag = true;
})
const toolBar = ref()
const componentView = ref()
const save = async () => {
	let basicConfig = toolBar.value.getConfig()
	if (!basicConfig) {
		basicConfig = {}
	}

	let componentConfig = await componentView.value.getConfig()
	if (!componentConfig) {
		componentConfig = {}
	}
	props.lf.saveComponentConfig(props.config.id, basicConfig, componentConfig)
	props.config.showFlag = false
}
const versionChangeCallback = (version) => {
	//componentView.value.reloadView(version)

	config.value.showFlag = false;
	let basicConfig = toolBar.value.getConfig()
	props.config.properties.basicConfig = basicConfig;
	nextTick(() => {
		config.value.showFlag = true;
	})

}
const getResource = async () => {
	let componentConfig = await componentView.value.getConfig()
	if (!componentConfig) {
		componentConfig = {}
	}
	let basicConfig = toolBar.value.getConfig()
	if (!basicConfig) {
		basicConfig = {}
	}
	let temp = props.lf.getFrontFile(props.config.id, componentConfig, basicConfig)
	return temp
}
</script>

<style scoped lang="less"></style>
